<template>
	<view class="mallIndex">
		<view class="searchBox">
            <uv-search placeholder="请输入搜索内容" v-model="keyword"></uv-search>
        </view>
		<template v-if="productList.length > 0">
            <view v-for="(item,index) in productList" :key="index" class="pList" @click="getDetail(item.id)">
                <view class="pList_left" ><image :src="`${uniConfig.ssoPath + item.logo}`" /></view>
                <view class="pList_right">
                    <view>{{item.name}}</view>
                </view>
            </view>
        </template>
		<view v-else style="margin-top:35vh">
            <uv-empty text="未发现搜索内容"  width="72" icon="https://wx.sijiyoufu.com/static/imgs/sites/empty.svg"></uv-empty>
        </view>
		<view class="lastchild"></view>
	</view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref } from 'vue'
import { getProductList,getCategory } from "@/api/product"
import { onLoad , onPageScroll} from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'

const keyword = ref<any>('')
const productList = ref<any>([])
const getDetail = (value:any) =>{
	uni.navigateTo({
		url: `/pages/newLine/detail?productId=${value}`
	})
}
const searchHeadler = () => {
    getProductList({name : keyword.value}).then(res=>{
		if(res.success){
			productList.value = res.data.records
		}
	})
}
onLoad(async (options : any) => {
    keyword.value = options.keyword
	searchHeadler()
})
const isChange = ref<any>(false)
onPageScroll((e) => {
	if(e.scrollTop>10){
		isChange.value = true
	}else{
		isChange.value = false
	}
})
</script>

<style lang="scss">
.searchBox{
    padding:32rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    .uv-search{
        position: relative;
        .uv-search__action{
            position: absolute;
            right:24rpx;
        }
    }
}
.pList{
    display: flex;
    width: 90%;
    margin: 32rpx auto 0;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0px 12px rgba(0,0,0,.1);
    align-items: center;
}
.lastchild{
    margin-bottom:32rpx;
}
.pList_right{
    padding: 0rpx 32rpx;
}
.pList_left{
    display: flex;
}
.pList_left image{
    width: 200rpx;
    height: 200rpx;
    border-radius: 9px;
}
.pList_text{
    color: #d2553d;
    margin-top: 32rpx;
    font-weight: 600;
}
</style>